<template>
  <div style="position: relative">
    <div id="game-box">

    </div>




    <van-popup v-model="game_over">
      <div class="over_box">
        <img class="over_bg" src="../assets/images/bg.jpg" alt="">
        <img class="win" src="../assets/images/win.png" alt="">
        <div class="score">
          <div class="text">您的成绩是：</div>
          <div class="result">{{time_text}}</div>
        </div>
        <img class="again" src="../assets/images/again.png" alt="" @click="again">
        <div class="btn_bottom">
          <img  src="../assets/images/guide_btn.png" alt="" @click="guide">
          <img  src="../assets/images/out.png" alt="" @click="out">
        </div>
      </div>
    </van-popup>

  </div>
</template>
<script>
  let game,bgm,clickbgm,losebgm,c,start_x, start_y,_this;
  import md5 from 'js-md5';
  //import api from "@/api";
  import axios from 'axios'
  import { Toast,Popup } from 'vant';
  import KeyData from '../api/url_list'
  export default {
    name: 'home',
    components:{
      [Toast.name]: Toast,
      [Popup.name]: Popup,
    },
    data() {
      return{
        time_text:'',
        game_start:false,
        game_over:false,
        musicPause:'play',
        userInfo:{
          playNumber: 0,
          userName: "许俊",
          userCode: "723488"
        }
      }
    },
    mounted(){

      if(window.localStorage.getItem('musicPause')){
        this.musicPause=window.localStorage.getItem('musicPause');
      }else{
        window.localStorage.setItem('musicPause','play')
      }

      // axios.get(KeyData.baseURL+'/api/test').then(res=>{
      //   console.log('res',res);
      //   if(res.data.succ==='ok'){
      //     this.userInfo=res.data.result;
      //     this.canvas_creat();
      //   }else {
      //     Toast(res.data.msg)
      //   }
      // })
      axios.get(KeyData.baseURL+'/galaParty/getPlayNum').then(res=>{
        console.log('res',res);
        if(res.data.succ==='ok'){
          if(res.data.result){
            this.userInfo=res.data.result;
          }else {
            this.userInfo.playNumber=0;
          }
          this.canvas_creat();
        }else {
          Toast(res.data.msg)
        }
      })
      // console.log( $('#__vconsole'))
      // $('#__vconsole').css('z-index','-1')
    },
    methods:{

      gameDuration(){
        let timestamp=new Date().getTime();
        let sign=md5(this.time_text+this.userInfo.userCode+timestamp+KeyData.key) ;
        axios.post(KeyData.baseURL+'/galaParty/gameDuration',{
          duration:this.time_text
        },{
          headers:{
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'sign':sign,
            'timestamp':timestamp
          }
        }).then(res=>{
          console.log('上传结果',res);
          if(res.data.succ!=='ok'){
            Toast(res.data.msg)
          }
        })
      },

      canvas_creat(){
        let _that = this;
        // console.log(window.screen.availHeight,document.body.clientHeight,window.devicePixelRatio);
        let dw = window.devicePixelRatio=== 2 ? 3:window.devicePixelRatio;
        var _width = window.screen.availWidth* dw;
        var _height = document.body.clientHeight* dw;
        document.getElementById('game-box').style.cssText=`width:${document.body.clientWidth}px;height:${document.body.clientHeight}px;margin:0`;
        //var dheight = window.screen.availHeight - document.documentElement.clientHeight;
        var unit = 1080 / _width;
        game = new Phaser.Game({
          width:_width,
          height:_height,
          renderer: Phaser.CANVAS,
          parent: 'game-box',
          // "resolution": window.devicePixelRatio,
          transparent:true
        });
        game.States = {};
        // 游戏初始化场景
        game.States.bootState = function () {
          this.init = function () {
            game.scale.pagesAlignHorizontally = true;
            game.scale.pageAlignVertically = true;
            game.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT;
            //失去焦点是否继续游戏
            game.stage.disableVisibilityChange = true;
            //开启鼠标事件
            game.input.touch.capture = true;
            game.scale.forcePortrait = true;
            game.scale.refresh();
          };
          this.preload = function () {
            game.load.image('loading_bg', require('../assets/images/loading_bg.jpg'));
            game.load.image('loading_title', require('../assets/images/loading_title.png'));
            game.load.spritesheet('loading_man', require('../assets/images/loading_man.png'),163,163,8);
            game.load.image('loading_grass', require('../assets/images/loading_grass.png'));
            game.load.image('progress', require('../assets/images/progress.png'));
          };
          this.create = function () {
            game.state.start('loader');
          };
        };
        //游戏加载场景
        game.States.loaderState = function () {
          this.init = function () {
            this.stage.backgroundColor="#caecaf";
            this.loading_bg = game.add.sprite(0, 0, 'loading_bg');
            this.loading_bg.width = game.width;
            this.loading_bg.height = game.height;
            this.loading_title = game.add.sprite(game.width/2, 200/unit, 'loading_title');
            this.loading_title.anchor.set(.5,.5);
            this.loading_title.width = 832/unit;
            this.loading_title.height = 232/unit;
          };
          this.preload = function () {
            //进度条
            this.loading_man=game.add.sprite(game.width/2, game.height/2.2-99/unit, 'loading_man');
            this.loading_man.animations.add('move');
            this.loading_man.animations.play('move', 18, true);
            this.loading_man.anchor.set(.5, .5);
            this.loading_man.width = 163 / unit;
            this.loading_man.height = 163 / unit;
            // this.loading_man.scale.set(unit);

            this.progress = game.add.sprite(game.width / 2, game.height/2.2, 'loading_grass');
            this.progress.anchor.set(.5,.5);
            this.progress.width = 864 / unit;
            this.progress.height = 165 / unit;
            this.progressBar = game.add.sprite(168 / unit, game.height/2.2+14/unit, 'progress');
            this.progressBar.anchor.set(0, .5);
            this.progressBar.width = 745 / unit;
            this.progressBar.height = 25 / unit;

            this.cropRect = new Phaser.Rectangle(0, 0, 0, this.progressBar.height);
            this.tween = game.add.tween(this.cropRect).to({width:this.progressBar.width}, 800, 'Linear', false, 0, 0, false);
            this.progressBar.crop(this.cropRect);
            this.tween.start();
            this.load_finish=false

            //加载资源-开始页

            //加载资源-game
            game.load.image('background', require('../assets/images/background.jpg'));
            game.load.image('mask', require('../assets/images/mask.png'));
            game.load.image('guide_box', require('../assets/images/guide_box.png'));
            game.load.spritesheet('guide', require('../assets/images/guide.png'),551,319,10);
            game.load.image('start', require('../assets/images/start.png'));
            game.load.spritesheet('voice', require('../assets/images/voice.png'), 105, 105, 2);
            game.load.spritesheet('player', require('../assets/images/player.png'),115,161,3);
            game.load.spritesheet('enemy_one', require('../assets/images/enemy_one.png'),109,163,3);
            game.load.image('clock', require('../assets/images/clock.png'));

            // //音频
            game.load.audio('bgm', require('../assets/audio/bgm.mp3'), true);
            game.load.audio('click', require('../assets/audio/button.mp3'), true);
            game.load.audio('lose', require('../assets/audio/lose.mp3'), true);
            game.load.onLoadComplete.add( ()=>{
              console.log('加载完成');
              this.load_finish=true;

              game.sound.setDecodedCallback(['bgm','click'], function () {
                bgm = game.add.sound('bgm');
                setTimeout(function () {
                  game.state.start('main');
                }, 1000);
              }, this);
            });
          };
          this.update=function (){
            if(this.load_finish){
              this.progressBar.updateCrop();
            }

          }
        };
        game.States.mainState = function () {
          this.init= function (){
            this.stage.backgroundColor="#fff";
          };
          this.create = function () {
            this.bg = game.add.sprite(0, 0, 'background');
            this.bg.width = game.width;
            this.bg.height = game.height;
            this.mask = game.add.sprite(0, 0, 'mask');
            this.mask.width = game.width;
            this.mask.height = game.height;

            this.guide_box=game.add.sprite(game.width/2, game.height/2-100/unit, 'guide_box');
            this.guide_box.width=714/unit*1.2;
            this.guide_box.height=1122/unit*1.2;
            this.guide_box.anchor.set(0.5);

            this.guide_img= game.add.sprite(game.width/2, game.height/2+80/unit, 'guide');
            this.guide_img.animations.add('move');
            this.guide_img.anchor.set(0.5);
            this.guide_img.width=551/unit*1.2;
            this.guide_img.height=319/unit*1.2;
            this.guide_img.animations.play('move', 10, true);

            this.start_btn = game.add.sprite(game.width/2,game.height/2+this.guide_box.height/2-280/unit, 'start');
            this.start_btn.inputEnabled = true;
            this.start_btn.anchor.set(0.5);
            this.start_btn.width=557/unit;
            this.start_btn.height=96/unit;
            this.start_btn.input.priorityID = 1;

            this.play_test = game.add.text(game.width/2,game.height/2+this.guide_box.height/2-180/unit, '游戏剩余次数'+_that.userInfo.playNumber,
              {font: " 42px Arial", fill: "#fff", align: "center"});
            this.play_test.anchor.set(0.5);


            if(_that.musicPause==='play'){
              bgm.play();
            }else{
              bgm.pause();
            }

            this.voiceBtn = game.add.sprite(game.width-105/unit-50, 115 / unit, 'voice',_that.musicPause==='play'?0:1);
            this.voiceBtn.width = 105 / unit;
            this.voiceBtn.height = 105 / unit;
            this.voiceBtn.inputEnabled = true;
            this.voiceBtn.events.onInputDown.add(()=>{
              if(_that.musicPause==='play'){
                _that.musicPause='pause';
                window.localStorage.setItem('musicPause','pause')
                this.voiceBtn.frame = 1;
                bgm.stop()
              }else{
                _that.musicPause='play';
                window.localStorage.setItem('musicPause','play');
                this.voiceBtn.frame = 0;
                bgm.play()
              }
            }, this);

            clickbgm = game.add.audio('click', 0.5, false);
            this.start_btn.events.onInputDown.add(()=>{
              if(_that.musicPause==='play'){
                clickbgm.play();
              }
              if(_that.userInfo.playNumber===0){
                Toast('游戏次数不足！')
              }else{
                _that.userInfo.playNumber--;
                game.state.start('game');
              }
            }, this);
          };
        };
        game.States.gameState = function (){
          this.init= function (){
            this.stage.backgroundColor="#fff";
            losebgm = game.add.audio('lose', 0.2, false);
          };
          this.create = function () {
            // 物理系统
            // 背景
            _this=this;
            this.start=true;
            _that.game_start=true;
            this.lose=0;
            this.second = 0;
            this.millisecond=0;
            this.config_data={
              speed:20,
              lose_num:1,
              enemy_velocity:300,
              playerShowTime:1500,
              enemy_num:50,
              add_time:15
            };
            game.physics.startSystem(Phaser.Physics.ARCADE);
            this.bg = game.add.tileSprite(0, 0, game.width, game.height, 'background');
            this.bg.tileScale.x = game.width/1080;
            this.bg.tileScale.y = game.width/1080;
            this.bg.autoScroll(0, 500);
            this.voiceBtn = game.add.sprite(game.width-105/unit-50, 115 / unit, 'voice',_that.musicPause==='play'?0:1);
            this.voiceBtn.width = 105 / unit;
            this.voiceBtn.height = 105 / unit;
            this.voiceBtn.inputEnabled = true;
            this.voiceBtn.events.onInputDown.add(()=>{
              if(_that.musicPause==='play'){
                _that.musicPause='pause';
                window.localStorage.setItem('musicPause','pause')
                this.voiceBtn.frame = 1;
                bgm.stop()
              }else{
                _that.musicPause='play';
                window.localStorage.setItem('musicPause','play');
                this.voiceBtn.frame = 0;
                bgm.play()
              }
            }, this);



            //创建敌人组
            this.enemys = game.add.group();
            this.enemys.enableBody = true;
            this.enemys.createMultiple(10, 'enemy_one');
            this.enemys.setAll('outOfBoundsKill', true);
            this.enemys.setAll('checkWorldBounds', true);
            // 敌人的随机位置范围
            this.maxWidth = game.width - 122;
            // 产生敌人的定时器
            this.enemys.forEach(function(enemy) {
              enemy.animations.add('move',[0,1]);
              enemy.animations.add('hit',[2]);
              enemy.animations.play('move', 6, true);
              enemy.num=0;
              enemy.i=0;
              enemy.angle=0;
              enemy.scale.set(unit*1.5);
              enemy.anchor.set(.5, .5)
            }, this);

            let e = this.enemys.getFirstExists(false);
            if(e) {
              //e.direction= 'right'
              e.direction=game.rnd.integerInRange(0, 1)>0.5 ? 'left':'right';
              e.reset(e.direction==='left' ? -e.width/2 :game.width+e.width/2 , game.rnd.integerInRange(game.height/8,game.height/5));   //增加的敌人
              e.animations.play('move', 12, true);
              e.body.velocity.y = this.config_data.enemy_velocity;
              e.hit=false;
              e.angle=0;
              e.num=0;
              e.i=0;
              e.tan=0;
              e.move_status=true
            }

            this.timer= game.time.events.loop(Phaser.Timer.SECOND *1,()=>{
              let time_num=parseInt(this.second/this.config_data.add_time)+1;
              for(let i=0;i<time_num;i++){
                let e = this.enemys.getFirstExists(false);
                if(e) {
                  if(time_num===1){
                    e.direction=game.rnd.integerInRange(0, 1)>0.5 ? 'left':'right';
                    e.reset(e.direction==='left' ?
                      -e.width/2 :game.width+e.width/2 ,
                      game.rnd.integerInRange(game.height/8,game.height/5));
                  }else if(time_num===2){
                    this.config_data.speed = 22;
                    if(i===0){
                      e.reset(-e.width/2 ,game.rnd.integerInRange(game.height/10,game.height/5));
                    }else if(i===1){
                      e.reset(game.width ,game.rnd.integerInRange(game.height/10,game.height/5));
                    }
                  }else if(time_num===3){
                    this.config_data.speed = 24;
                    if(i===0){
                      e.reset(-e.width/2 ,game.rnd.integerInRange(game.height/10,game.height/5));
                    }else if(i===1){
                      e.reset(game.width ,game.rnd.integerInRange(game.height/10,game.height/5));
                    }else if(i===2){
                      e.reset(game.rnd.integerInRange(-e.width/2,game.width) ,-e.height/2);
                    }
                  }else{
                    this.config_data.speed = 28;
                    if(i===0){
                      e.reset(-e.width/2 ,game.rnd.integerInRange(game.height/10,game.height/5));
                    }else if(i===1){
                      e.reset(game.width ,game.rnd.integerInRange(game.height/10,game.height/5));
                    }else if(i===2){
                      e.reset(game.rnd.integerInRange(-e.width/2,game.width) ,-e.height/2);
                    }
                    else if(i===3){
                      e.direction=game.rnd.integerInRange(0, 1)>0.5 ? 'left':'right';
                      e.reset(e.direction==='left' ?
                        -e.width/2 :game.width+e.width/2  ,game.rnd.integerInRange(game.height/2,game.height/2+game.height/5));
                    }
                  }
                  e.animations.play('move', 12, true);
                  e.body.velocity.y = this.config_data.enemy_velocity;
                  e.hit=false;
                  e.angle=0;
                  e.num=0;
                  e.i=0;
                  e.tan=0;
                  e.move_status=true
                }
              }
            }, this);



            this.player = game.add.sprite(game.width / 2, game.height / 2+300, 'player');
            this.player.animations.add('move');
            this.player.animations.play('move', 6, true);
            this.player.anchor.set(.5, .5);
            this.player.scale.set(unit*1.5);
            game.physics.arcade.enable(this.player);

            this.player.body.collideWorldBounds = true;
            this.player.body.allowGravity = true;
            this.player.over=false;
            console.log(this.player);
            this.time_handle=game.time.events.loop(Phaser.Timer.SECOND*0.05, this.updateCounter, this);

            this.clock=game.add.sprite(game.width / 2-100/unit, 80/unit, 'clock');
            this.clock.width=63/unit*1.2;
            this.clock.height=63/unit*1.2;
            this.clock.anchor.set(.5, .5);
            this.text = game.add.text(game.width/2+70/unit, 80/unit, this.second+'.'+this.millisecond+'秒', {font: "72px Arial", fill: "#fff", align: "center"});
            this.text.anchor.set(0.5);
            c = document.getElementById("game-box");
            //开始点击的点
            c.addEventListener("touchstart", this.touchStart,false);
            // c.addEventListener("touchend", function () {
            //
            // });
            // c.addEventListener("touchcancel", function () {
            //
            // });
            c.addEventListener("touchmove", this.touchMove,false )
          };

          this.updateCounter=function () {
            if(this.start){
              this.millisecond=this.millisecond+5;
              if(this.millisecond>=100)
              {
                this.millisecond=0;
                this.second=this.second+1;
              }
            }
            this.text.text=this.second+'.'+this.millisecond+' 秒';
            _that.time_text=this.second+'.'+this.millisecond;
          };
          this.touchStart=function (e){

            start_x = e.changedTouches[0].clientX*window.devicePixelRatio;
            start_y = e.changedTouches[0].clientY*window.devicePixelRatio;
          };

          this.touchMove=function (e,) {
            if(!_that.game_start) return false;
            let x = e.changedTouches[0].clientX*window.devicePixelRatio;
            let y = e.changedTouches[0].clientY*window.devicePixelRatio;
            // 移动目标
            _this.player.x =  _this.player.x + (x - start_x);
            _this.player.y =  _this.player.y + (y - start_y);
            if ( _this.player.x >  game.width)  _this.player.x =  game.width;
            if ( _this.player.x < 0)  _this.player.x = 0;
            if ( _this.player.y >  game.height)  _this.player.y =  game.height;
            if ( _this.player.y < 0)  _this.player.y = 0;
            start_x = x;
            start_y = y;
          };

          this.update = function () {
            if(this.second>9998){
              this.start=false;
              c.removeEventListener("touchmove",this.touchStart,false);
              c.removeEventListener("touchstart", this.touchMove,false);
              this.bg.autoScroll(0, 0);
              game.time.events.remove(this.timer)
              game.time.events.remove( this.time_handle)
              _that.game_over=true;
              _that.gameDuration();
              return false
            }
            game.physics.arcade.overlap(this.enemys, this.player, (e,r)=>{
              // return false
              //  this.lose++;
              // if(this.lose>this.config_data.lose_num&&this.start){
              if(this.start){
                this.start=false;
                _that.game_start=false;
                r.body.velocity.y = 0;
                game.add.tween(e).to({alpha: 0},50, 'Linear', true, 0, -1,true);
                c.removeEventListener("touchmove",this.touchStart,false);
                c.removeEventListener("touchstart", this.touchMove,false);
                this.bg.autoScroll(0, 0);
                game.time.events.remove(this.timer);
                game.time.events.remove( this.time_handle);

                if(_that.musicPause==='play'){
                  losebgm.play();
                }

                bgm.stop();
                setTimeout(()=>{
                  _that.game_over=true;
                  _that.gameDuration()
                  //game.state.start('main');
                },500)

              }
              // console.log('lose')
            }, null, this);


            this.enemys.forEach(function (e) {
              let rate = 1;
              if(this.start) {
                if (e.move_status) { //入场的横向偏移完成
                  e.num++;
                  if (e.num > this.config_data.enemy_num &&e.hit) {
                    if(e.i===4){
                      e.x += this.config_data.speed*Math.sin(e.tan);
                      e.y += this.config_data.speed*Math.cos(e.tan)
                    }else if(e.i===3){
                      //console.log(Math.cos(e.tan))
                      e.x -= this.config_data.speed*Math.cos(e.tan)
                      e.y += this.config_data.speed*Math.sin(e.tan);
                    }else if (e.i === 2) {
                      e.x -= this.config_data.speed*Math.cos(e.tan)
                      e.y -= this.config_data.speed*Math.sin(e.tan)
                    }else if (e.i === 1) {
                      e.x += this.config_data.speed*Math.cos(e.tan)
                      e.y -= this.config_data.speed*Math.sin(e.tan)
                    }else {
                      e.y+=this.config_data.speed
                    }

                  } else if(e.num===this.config_data.enemy_num) {//转角
                    e.animations.play('hit', 6, true);
                    e.hx=this.player.x;
                    e.hy=this.player.y;
                    e.hit = true;
                    if (this.player.x > e.x * rate && e.y * rate > this.player.y ) { //第一象限
                      e.i = 1;
                      e.angle = -90 - Math.atan((e.y * rate - this.player.y) / (this.player.x - e.x * rate)) * 180 / Math.PI;
                      e.tan=Math.atan((e.y * rate - this.player.y) / (this.player.x - e.x * rate))
                    }
                    if (e.x * rate > this.player.x && e.y * rate > this.player.y ) { //第二象限
                      e.i = 2;
                      e.angle = 90 + Math.atan((e.y * rate - this.player.y) / (e.x * rate - this.player.x)) * 180 / Math.PI;
                      e.tan=Math.atan((e.y * rate - this.player.y) / (e.x * rate - this.player.x))

                    }
                    if (e.x * rate > this.player.x && this.player.y > e.y * rate ) { //第三象限
                      e.i = 3;
                      e.angle = Math.atan((e.x * rate - this.player.x) / (this.player.y - e.y * rate)) * 180 / Math.PI;
                      e.tan=Math.atan((e.y * rate - this.player.y) / (this.player.x - e.x * rate))

                    }
                    if (this.player.x > e.x * rate && this.player.y > e.y * rate) { //第四象限
                      e.i = 4;
                      e.angle = -Math.atan((this.player.x - e.x * rate) / (this.player.y - e.y * rate)) * 180 / Math.PI;
                      e.tan=Math.atan((this.player.x - e.x * rate) / (this.player.y - e.y * rate))
                    }
                  }
                  else if(e.num<this.config_data.enemy_num){
                    if (this.player.x > e.x * rate && e.y * rate > this.player.y &&!e.hit) {  //上落下落
                      //第一象限
                      e.x += this.config_data.speed/2;
                      e.y -= this.config_data.speed/2;
                    }
                    if (e.x * rate > this.player.x && e.y * rate > this.player.y &&!e.hit) { //第二象限
                      e.x -= this.config_data.speed/2;
                      e.y -= this.config_data.speed/2;
                    }
                    if (e.x * rate > this.player.x && this.player.y > e.y * rate &&!e.hit) { //第三象限
                      e.x -= this.config_data.speed/2;
                      e.y += this.config_data.speed/2;
                    }
                    if (this.player.x > e.x * rate && this.player.y > e.y * rate &&!e.hit) { //第四象限
                      e.x += this.config_data.speed/2;
                      e.y += this.config_data.speed/2;

                    }
                  }
                }
              }else{
                e.body.velocity.y =300;
              }
            }, this);
          }
        };
        game.state.add('boot', game.States.bootState);
        game.state.add('loader', game.States.loaderState);
        game.state.add('main', game.States.mainState);
        game.state.add('game', game.States.gameState);
        game.state.start('boot');

      },
      again(){
        if(this.musicPause==='play'){
          clickbgm.play();
        }
        this.game_over=false;
        this.time_text='';
        game.state.start('main')
      },
      guide(){
        this.game_over=false;
        game.state.start('main')
      },
      out(){
        var params = {
          data:{}
        };
        SFNativeApp.back(params);
      },

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .tip_box{
    position: relative;
    width: 18rem;
    height: 24rem;
  }
  .tip{
    position: absolute;
    width: 16rem;
    height: 20rem;
    margin: 0 auto;
    top:0;
    left: 50%;
    transform: translateX(-50%);
    display: block;
  }
  .sure{
    position: absolute;
    width: 6rem;
    margin: 0 auto;
    top:20rem;
    left: 50%;
    transform: translateX(-50%);
    display: block;
  }
  .clock {
    text-align: center;
    color: #fff;
    font-size: 24px;
    width: 100%;
    position: absolute;
    top:20px;
    left: 0;
    vertical-align: middle;
    box-sizing: border-box;
    pointer-events: none;

  }
  .clock span{
    display: inline-block;
    background: url('../assets/images/clock.png') no-repeat;
    background-size: 100% 100%;
    width: 32px;
    height: 32px;
    vertical-align: middle;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -moz-user-select: none; /*火狐*/
    -webkit-user-select: none;  /*webkit浏览器*/
    -ms-user-select: none;   /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
    user-select: none;
    pointer-events:none;
  }
  .clock i{
    display: inline-block;
    -webkit-touch-callout: none;
    -moz-user-select: none; /*火狐*/
    -webkit-user-select: none;  /*webkit浏览器*/
    -ms-user-select: none;   /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
    user-select: none;
    font-style: normal;
    pointer-events:none;
  }
  .over_box{
    width: 100vw;
    height: 100vh;
    position: relative;
  }
  .over_bg{
    position: absolute;
    left: 0;
    top:0;
    width: 100%;
    height: 100%;
    display: block;
  }
  .win{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top:5rem;
    width:15rem;
  }
  .score{
    position: absolute;
    width: 100%;
    top:19rem;
    left: 0;
    text-align: center;
  }
  .result{
    font-size: 2rem;
    color: #d32f2f;
    font-weight: bold;
  }
  *{ -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
  }

  .again{
    position: absolute;
    width: 15rem;
    height: 2.25rem;
    transform: translateX(-50%);
    top:25rem;
    left: 50%;
  }
  .btn_bottom{
    position: absolute;
    width: 15rem;
    transform: translateX(-50%);
    top:29rem;
    left: 50%;
    display: flex;
    justify-content: center;
  }
  .btn_bottom img{
    width: 7rem;
    height: 2rem;
    margin: 0 .5rem
  }
</style>
